<!DOCTYPE html>
<html class="sidebar_default no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Statistics - Start - Admin Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="css/images/favicon.png">
<!-- Le styles -->
<link href="css/twitter/bootstrap.css" rel="stylesheet">
<link href="css/base.css" rel="stylesheet">
<link href="css/twitter/responsive.css" rel="stylesheet">
<link href="css/jquery-ui-1.8.23.custom.css" rel="stylesheet">
<script src="js/plugins/modernizr.custom.32549.js"></script>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="../../../html5shim.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
</head>

<body>
<div id="loading"><img src="img/ajax-loader.gif"></div>
<div id="responsive_part">
  <div class="logo"> <a href="index.html"><span>Start</span><span class="icon"></span></a> </div>
  <ul class="nav responsive">
    <li>
      <button class="btn responsive_menu icon_item" data-toggle="collapse" data-target=".overview"> <i class="icon-reorder"></i> </button>
    </li>
  </ul>
</div>
<!-- Responsive part -->

<div id="sidebar" class=" collapse1 in">
  <div class="scrollbar">
    <div class="track">
      <div class="thumb">
        <div class="end"></div>
      </div>
    </div>
  </div>
  <div class="viewport ">
    <div class="overview collapse">
      <div class="search row-fluid container">
        <h2>Search</h2>
        <form class="form-search">
          <div class="input-append">
            <input type="text" class=" search-query" placeholder="">
            <button class="btn_search color_4">Search</button>
          </div>
        </form>
      </div>
      <ul id="sidebar_menu" class="navbar nav nav-list container full">
        <li class="accordion-group color_4"> <a class="dashboard " href="index.html"><img src="img/menu_icons/dashboard.png"><span>Dashboard</span></a> </li>
        <li class="accordion-group color_7"> <a class="accordion-toggle widgets collapsed " data-toggle="collapse" data-parent="#sidebar_menu" href="#collapse1"> <img src="img/menu_icons/forms.png"><span>Form Elements</span></a>
          <ul id="collapse1" class="accordion-body collapse">
            <li><a href="forms_general.html">General</a></li>
            <li><a href="forms_validation.html">Validation</a></li>
            <li><a href="forms_editor.html">Editor</a></li>
          </ul>
        </li>
        <li class="accordion-group color_3"> <a class="accordion-toggle widgets collapsed" data-toggle="collapse" data-parent="#sidebar_menu" href="#collapse2"> <img src="img/menu_icons/widgets.png"><span>UI Widgets</span></a>
          <ul id="collapse2" class="accordion-body collapse">
            <li><a href="ui_buttons.html">Buttons</a></li>
            <li><a href="ui_dialogs.html">Dialogs</a></li>
            <li><a href="ui_icons.html">Icons</a></li>
            <li><a href="ui_tabs.html">Tabs</a></li>
            <li><a href="ui_accordion.html">Accordion</a></li>
          </ul>
        </li>
        <li class="color_13"> <a class="widgets" href="calendar2.html"> <img src="img/menu_icons/calendar.png"><span>Calendar</span></a> </li>
        <li class="color_10"> <a class="widgets"data-parent="#sidebar_menu" href="maps.html"> <img src="img/menu_icons/maps.png"><span>Maps</span></a> </li>
        <li class="accordion-group color_12"> <a class="accordion-toggle widgets collapsed" data-toggle="collapse" data-parent="#sidebar_menu" href="#collapse3"> <img src="img/menu_icons/tables.png"><span>Tables</span></a>
          <ul id="collapse3" class="accordion-body collapse">
            <li><a href="tables_static.html">Static</a></li>
            <li><a href="tables_dynamic.html">Dynamics</a></li>
          </ul>
        </li>
        <li class="accordion-group color_19 active"> <a class="accordion-toggle widgets collapsed" data-toggle="collapse" data-parent="#sidebar_menu" href="#collapse4"> <img src="img/menu_icons/statistics.png"><span>Charts</span></a>
          <ul id="collapse4" class="accordion-body collapse in">
            <li class="active"><a href="statistics.html">Statistics Elements</a></li>
            <li><a href="charts.html">Charts</a></li>
          </ul>
        </li>
        <li class="color_24"> <a class="widgets"data-parent="#sidebar_menu" href="grid.html"> <img src="img/menu_icons/grid.png"><span>Grid</span></a> </li>
        <li class="color_8"> <a class="widgets"data-parent="#sidebar_menu" href="media.html"> <img src="img/menu_icons/gallery.png"><span>Media</span></a> </li>
        <li class="color_4"> <a class="widgets"data-parent="#sidebar_menu" href="file_explorer.html"> <img src="img/menu_icons/explorer.png"><span>File Explorer</span> <span class="label  label-info pull-right">new</span></a> </li>
        <li class="accordion-group color_25"> <a class="accordion-toggle widgets collapsed" data-toggle="collapse" data-parent="#sidebar_menu" href="#collapse5"> <img src="img/menu_icons/others.png"><span>Specific Pages</span></a>
          <ul id="collapse5" class="accordion-body collapse">
            <li><a href="profile.html">Profile</a></li>
            <li><a href="search.html">Search</a></li>
            <li><a href="index2.html">Login</a></li>
            <li><a href="404.html">404 Error</a></li>
          </ul>
        </li>
      </ul>
      <div class="menu_states row-fluid container ">
        <h2 class="pull-left">Menu Settings</h2>
        <div class="options pull-right">
          <button id="menu_state_1" class="color_4" rel="tooltip" data-state ="sidebar_icons" data-placement="top" data-original-title="Icon Menu">1</button>
          <button id="menu_state_2" class="color_4 active" rel="tooltip" data-state ="sidebar_default" data-placement="top" data-original-title="Fixed Menu">2</button>
          <button id="menu_state_3" class="color_4" rel="tooltip" data-placement="top" data-state ="sidebar_hover" data-original-title="Floating on Hover Menu">3</button>
        </div>
      </div>
      <!-- End sidebar_box --> 
      
    </div>
  </div>
</div>
<div id="main">
  <div class="container">
    <div class="header row-fluid">
      <div class="logo"> <a href="index.html"><span>Start</span><span class="icon"></span></a> </div>
      <div class="top_right">
        <ul class="nav nav_menu">
          <li class="dropdown"> <a class="dropdown-toggle administrator" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="../../page.html">
            <div class="title"><span class="name">George</span><span class="subtitle">Future Buyer</span></div>
            <span class="icon"><img src="img/thumbnail_george.jpg"></span></a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
              <li><a href="profile.html"><i class=" icon-user"></i> My Profile</a></li>
              <li><a href="forms_general.html"><i class=" icon-cog"></i>Settings</a></li>
              <li><a href="index2.html"><i class=" icon-unlock"></i>Log Out</a></li>
              <li><a href="search.html"><i class=" icon-flag"></i>Help</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- End top-right --> 
    </div>
    <div id="main_container">
      <div class="row-fluid">
        <div class="span6">
          <div class="box paint">
            <div class="title row-fluid">
              <h4> Simple stats </h4>
            </div>
            <!-- End title row-fluid -->
            <div class="row-fluid  content simple_stats">
              <div class="row-fluid fluid">
                <div class="span7">
                  <div class="row-fluid pagination-centered well well-small height_medium2"> <i class="icon-caret-up green xxbig pull-left well"></i>
                    <div class="pull-left pagination-centered value">
                      <h1 class="full value green">$398.23</h1>
                      <p class="full muted"> already paid </p>
                    </div>
                  </div>
                  <!-- End .row-fluid -->
                  <div class="row-fluid pagination-centered well well-small height_medium2"> <i class="icon-caret-down red xxbig pull-left well"></i>
                    <div class="pull-left pagination-centered value">
                      <h1 class="full value red">$192.16</h1>
                      <p class="full muted"> not payed yet </p>
                    </div>
                  </div>
                  <!-- End .row-fluid -->
                  <div class="row-fluid pagination-centered well well-small"> <i class="icon-minus blue xxbig pull-left well"></i>
                    <div class="pull-left pagination-centered value">
                      <h1 class="full value blue">$590.39</h1>
                      <p class="full muted"> total taxes </p>
                    </div>
                  </div>
                  <!-- End .row-fluid --> 
                </div>
                <div class="span5">
                  <div class="row-fluid pagination-centered well well-small height_medium2">
                    <h3 class="full">Visits Today</h3>
                    <h3 class="green full"><strong>+8.632</strong></h3>
                  </div>
                  <div class="row-fluid pagination-centered well well-small height_medium2">
                    <h3 class="full">Earnings Today</h3>
                    <h3 class="red full"><strong>-$3.62</strong></h3>
                  </div>
                  <div class="row-fluid pagination-centered well well-small height_medium2">
                    <h3 class="full">Users Registered</h3>
                    <h3 class="blue full"><strong>12</strong></h3>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- End .box  --> 
        </div>
        <!-- End .span6-->
        <div class="span6">
          <div class=" box paint" style="min-height:398px;">
            <div class="title row-fluid">
              <h4> <i class=" icon-bar-chart"></i><span>Gauge stats</span> </h4>
            </div>
            <!-- End title row-fluid -->
            <div class="row-fluid fluid content">
              <div class="span8">
                <div id="gauge1" class="row-fluid gauge" style="height:300px"> </div>
              </div>
              <div class="span4">
                <div id="gauge2" class="row-fluid gauge" style="height:100px"> </div>
                <div id="gauge3" class="row-fluid gauge" style="height:100px"> </div>
                <div id="gauge4" class="row-fluid gauge" style="height:100px"> </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End .box .span6--> 
      </div>
      <!-- End row-fluid -->
      <div class="row-fluid">
        <div class="span6">
          <div class=" box paint">
            <div class="title row-fluid">
              <h4> <span>With Charts</span> </h4>
            </div>
            <!-- End title row-fluid -->
            <div class="row-fluid content simple_stats">
              <div class="row-fluid fluid">
                <div class="span4">
                  <div class=" pagination-centered well" style="width:150px; margin:0 auto;">
                    <div class="row-fluid fluid"> <i class="icon-caret-up green medium span3"></i> <span class="percent span3">12%</span> <span class="bar1 span6">3,4,10,5,3,6,3</span> </div>
                    <div class="row-fluid ">
                      <h2 class="full"><strong>$192.37</strong></h2>
                    </div>
                    <div class="row-fluid"> Today so far </div>
                  </div>
                </div>
                <!-- End .span4 -->
                <div class="span4">
                  <div class="pagination-centered well" style="width:150px; margin:0 auto;">
                    <div class="row-fluid fluid"> <i class="icon-caret-down red medium span3"></i> <span class="percent span3">4%</span> <span class="bar2 span6">1, 4, 6, 7,4, 2,4</span> </div>
                    <div class="row-fluid">
                      <h2 class="full"><strong>$743.82</strong></h2>
                    </div>
                    <div class="row-fluid"> <span class="inline">Yesterday</span> <i class="icon-question-sign muted inline" rel="tooltip" data-placement="right" data-original-title="Your total earnings accrued yesterday. This amount is an estimate that is subject to change when your earnings are verified for accuracy at the end of every month."></i> </div>
                  </div>
                </div>
                <!-- End .span4 -->
                <div class="span4">
                  <div class="pagination-centered well" style="width:150px; margin:0 auto;">
                    <div class="row-fluid fluid"> <i class="icon-minus blue medium span3"></i> <span class="percent span3">13%</span> <span class="bar3 span6">1, 4, 6, 7,4, 2,4</span> </div>
                    <div class="row-fluid">
                      <h2 class="full"><strong>$990.84</strong></h2>
                    </div>
                    <div class="row-fluid"> Last Month </div>
                  </div>
                </div>
                <!-- End .span4 --> 
              </div>
            </div>
            <div class="description">Small boxes for general statistics</div>
          </div>
        </div>
        <!-- End .box .span6-->
        <div class="span6 ">
          <div class=" box paint ">
            <div class="title row-fluid">
              <h4> <span>Progress bars</span> </h4>
            </div>
            <!-- End title row-fluid -->
            <div class="row-fluid content">
              <div class="progress progress-info">
                <div class="bar" style="width: 20%"> </div>
              </div>
              <div class="progress progress-success progress-striped active">
                <div class="bar" style="width: 60%;"> </div>
              </div>
              <div class="progress">
                <div class="bar bar-success" style="width: 35%;"> </div>
                <div class="bar bar-warning" style="width: 30%;"> </div>
                <div class="bar bar-danger" style="width: 25%;"> </div>
              </div>
              <div class="progress">
                <div class="bar white" style="width: 27%;"> </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End .box .span6--> 
      </div>
      <!-- End row-fluid --> 
    </div>
    <!-- End #container --> 
  </div>
  <div id="footer">
    <p> &copy; Start - Admin Template 2012 </p>
    <span class="company_logo"><a href="../../../www.pixelgrade.com/default.htm"></a></span> </div>
</div>
<div class="background_changer dropdown">
  <div class="dropdown" id="colors_pallete"> <a data-toggle="dropdown" data-target="drop4" class="change_color"></a>
    <ul  class="dropdown-menu pull-left" role="menu" aria-labelledby="drop4">
      <li><a data-color="color_0" class="color_0" tabindex="-1">1</a></li>
      <li><a data-color="color_1" class="color_1" tabindex="-1">1</a></li>
      <li><a data-color="color_2" class="color_2" tabindex="-1">2</a></li>
      <li><a data-color="color_3" class="color_3" tabindex="-1">3</a></li>
      <li><a data-color="color_4" class="color_4" tabindex="-1">4</a></li>
      <li><a data-color="color_5" class="color_5" tabindex="-1">5</a></li>
      <li><a data-color="color_6" class="color_6" tabindex="-1">6</a></li>
      <li><a data-color="color_7" class="color_7" tabindex="-1">7</a></li>
      <li><a data-color="color_8" class="color_8" tabindex="-1">8</a></li>
      <li><a data-color="color_9" class="color_9" tabindex="-1">9</a></li>
      <li><a data-color="color_10" class="color_10" tabindex="-1">10</a></li>
      <li><a data-color="color_11" class="color_11" tabindex="-1">10</a></li>
      <li><a data-color="color_12" class="color_12" tabindex="-1">12</a></li>
      <li><a data-color="color_13" class="color_13" tabindex="-1">13</a></li>
      <li><a data-color="color_14" class="color_14" tabindex="-1">14</a></li>
      <li><a data-color="color_15" class="color_15" tabindex="-1">15</a></li>
      <li><a data-color="color_16" class="color_16" tabindex="-1">16</a></li>
      <li><a data-color="color_17" class="color_17" tabindex="-1">17</a></li>
      <li><a data-color="color_18" class="color_18" tabindex="-1">18</a></li>
      <li><a data-color="color_19" class="color_19" tabindex="-1">19</a></li>
      <li><a data-color="color_20" class="color_20" tabindex="-1">20</a></li>
      <li><a data-color="color_21" class="color_21" tabindex="-1">21</a></li>
      <li><a data-color="color_22" class="color_22" tabindex="-1">22</a></li>
      <li><a data-color="color_23" class="color_23" tabindex="-1">23</a></li>
      <li><a data-color="color_24" class="color_24" tabindex="-1">24</a></li>
      <li><a data-color="color_25" class="color_25" tabindex="-1">25</a></li>
    </ul>
  </div>
</div>
<!-- End .background_changer -->
</div>
<!-- /container --> 

<!-- Le javascript
    ================================================== --> 
<!-- General scripts --> 
<script src="js/jquery.js" type="text/javascript"> </script> 
<script src="js/plugins/enquire.min.js" type="text/javascript"></script> 
<script language="javascript" type="text/javascript" src="js/plugins/jquery.sparkline.min.js"></script> 
<script src="js/plugins/excanvas.compiled.js" type="text/javascript"></script> 
<script src="js/bootstrap-transition.js" type="text/javascript"></script> 
<script src="js/bootstrap-alert.js" type="text/javascript"></script> 
<script src="js/bootstrap-modal.js" type="text/javascript"></script> 
<script src="js/bootstrap-dropdown.js" type="text/javascript"></script> 
<script src="js/bootstrap-scrollspy.js" type="text/javascript"></script> 
<script src="js/bootstrap-tab.js" type="text/javascript"></script> 
<script src="js/bootstrap-tooltip.js" type="text/javascript"></script> 
<script src="js/bootstrap-popover.js" type="text/javascript"></script> 
<script src="js/bootstrap-button.js" type="text/javascript"></script> 
<script src="js/bootstrap-collapse.js" type="text/javascript"></script> 
<script src="js/bootstrap-carousel.js" type="text/javascript"></script> 
<script src="js/bootstrap-typeahead.js" type="text/javascript"></script> 
<script src="js/bootstrap-affix.js" type="text/javascript"></script> 
<script src="js/fileinput.jquery.js" type="text/javascript"></script> 
<script src="js/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script> 
<script src="js/jquery.touchdown.js" type="text/javascript"></script> 
<script language="javascript" type="text/javascript" src="js/plugins/jquery.uniform.min.js"></script> 
<script language="javascript" type="text/javascript" src="js/plugins/jquery.tinyscrollbar.min.js"></script> 
<script language="javascript" type="text/javascript" src="js/jnavigate.jquery.min.js"></script> 
<script language="javascript" type="text/javascript" src="js/jquery.touchSwipe.min.js"></script> 
<script language="javascript" type="text/javascript" src="js/plugins/jquery.peity.min.js"></script> 

<!-- Flot charts --> 
<script language="javascript" type="text/javascript" src="js/plugins/flot/jquery.flot.js"></script> 
<script language="javascript" type="text/javascript" src="js/plugins/flot/jquery.flot.crosshair.js"></script> 
<script language="javascript" type="text/javascript" src="js/plugins/flot/jquery.flot.stack.js"></script> 
<script language="javascript" type="text/javascript" src="js/plugins/flot/jquery.flot.pie.js"></script> 
<script language="javascript" type="text/javascript" src="js/plugins/flot/jquery.flot.resize.js"></script> 
<!-- Jumware plugins for charts http://www.jumware.com/Includes/jquery/Flot/Examples/index.html --> 
<script language="javascript" type="text/javascript" src="js/plugins/flot/jquery.flot.spider.js"></script> 
<script language="javascript" type="text/javascript" src="js/plugins/jquery.peity.min.js"></script> 
<script src="js/plugins/highcharts/highcharts.js"></script> 
<script src="js/plugins/highcharts/modules/exporting.js"></script> 
<script src="js/plugins/justGage.1.0.1/resources/js/raphael.2.1.0.min.js"></script> 
<script src="js/plugins/justGage.1.0.1/resources/js/justgage.1.0.1.min.js"></script> 

<!-- Task plugin --> 
<script language="javascript" type="text/javascript" src="js/plugins/knockout-2.0.0.js"></script> 

<!-- Custom made scripts for this template --> 
<script src="js/scripts.js" type="text/javascript"></script> 
<script type="text/javascript">
   $(document).ready(function() {
    $('[rel=tooltip]').tooltip();
  if (Modernizr.canvas) {
      $(".bar").peity("bar", {
        colour: "#fff",
        width: 50,
        height: 17
      }).fadeIn();
      $(".bar1").peity("bar", {
        colour: "#4da74d",
        width: 30,
        height: 17
      }).fadeIn();
      $(".bar2").peity("bar", {
        colour: "#cb4b4b",
        width: 30,
        height: 17
      }).fadeIn();
       $(".bar3").peity("bar", {
        colour: "#5e96ea",
        width: 30,
        height: 17
      }).fadeIn();
      $(".line").peity("line").fadeIn();
    };
  });
</script> 
<script type="text/javascript">
$(function () {
    // we use an inline data source in the example, usually data would
    // be fetched from a server
    var data = [], totalPoints = 250;
    function getRandomData() {
        if (data.length > 0)
            data = data.slice(1);
        // do a random walk
        while (data.length < totalPoints) {
            var prev = data.length > 0 ? data[data.length - 1] : 20;
            var y = prev + Math.random() * 10 - 5;
            if (y < 0)
                y = 0;
            if (y > 100)
                y = 100;
            data.push(y);
        }
        // zip the generated y values with the x values
        var res = [];
        for (var i = 0; i < data.length; ++i)
            res.push([i, data[i]])
        return res;
    }
    // setup control widget
    var updateInterval = 100;
    // setup plot
    var options = {
        series: {
                  shadowSize: 0,
                   lines: { show: true, fill:true, },
                   points: { show: false, fill:true },
               }, // drawing is faster without shadows
        yaxis: { min: 0, max: 90 },
        xaxis: { show: false },
        grid: { hoverable: true, clickable: true, autoHighlight: false, borderWidth:0,  backgroundColor: { colors: ["#fff", "#fbfbfb"] } },
        colors: ["#a1d14d"]
    };
    var plot = $.plot($("#real-time"), [ { data: getRandomData()} ], options);
    function update() {
        plot.setData([ getRandomData() ]);
        // since the axes don't change, we don't need to call plot.setupGrid()
        plot.draw();
        setTimeout(update, updateInterval);
    }
    update();
});
</script> 
<script type="text/javascript">
   $(window).load(function() {
     $('#loading').fadeOut();
    });
    $(function () {
    // Big Bar Chart
    var sin = [], cos = [], tes = [];
    for (var i = 0; i < 14; i += 1) {
        sin.push([i, Math.sin(i)*Math.random()*0.9]);
        cos.push([i, Math.cos(i)*Math.random()*1.4]);
          tes.push([i, Math.cos(i)*Math.random()*0.4]);
    }
    var plot = $.plot($("#placeholder"),
           [  { data: sin, label: "Google+", color:"#ef4723", shadowSize:0 }, { data: cos, label: "Envato", color:"#a1d14d", shadowSize:0},  { data: tes, label: "Facebook", color:"#4a8cf7", shadowSize:0 } ], {
               series: {
                   lines: { show: true, fill:true },
                   points: { show: true, fill:true },
               },
               grid: { hoverable: true, clickable: true, autoHighlight: false, borderWidth:0,  backgroundColor: { colors: ["#fff", "#fbfbfb"] } },
               yaxis: { min: -1.5, max: 1.5 },
             });
    function showTooltip(x, y, contents) {
        $('<div id="tooltip">' + contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #ccc',
            padding: '2px 6px',
            'background-color': '#fff',
            opacity: 0.80
        }).appendTo("body").fadeIn(200);
    }
    var previousPoint = null;
    $("#placeholder").bind("plothover", function (event, pos, item) {
        $("#x").text(pos.x.toFixed(2));
        $("#y").text(pos.y.toFixed(2));
            if (item) {
                if (previousPoint != item.dataIndex) {
                    previousPoint = item.dataIndex;
                    $("#tooltip").remove();
                    var x = item.datapoint[0].toFixed(2),
                        y = item.datapoint[1].toFixed(2);
                    showTooltip(item.pageX, item.pageY,
                                item.series.label + " of " + x + " = " + y);
                }
        }
    });
    // Line chart
    var sin2 = [], cos2 = [];
    for (var i = 0; i < 14; i += 0.5) {
        sin2.push([i, Math.sin(i)]);
        cos2.push([i, Math.cos(i)]);
    }
     var plot = $.plot($("#line-chart"),
           [  { data: sin2, label: "Google+", color:"#ef4723", shadowSize:0 }, { data: cos2, label: "Envato", color:"#a1d14d", shadowSize:0} ], {
               series: {
                   lines: { show: true, fill:false },
                   points: { show: true, fill:true },
               },
               grid: { hoverable: true, clickable: true, autoHighlight: false, borderWidth:0,  backgroundColor: { colors: ["#fff", "#fbfbfb"] } },
               yaxis: { min: -1.5, max: 1.5 },
             });
     // Bar chart
          var d11 = [];
    for (var i = 0; i <= 20; i += 1)
        d11.push([i, parseInt(Math.random() * 30)]);
    var d22 = [];
    for (var i = 0; i <= 20; i += 1)
        d22.push([i, parseInt(Math.random() * 30)]);
    var d33 = [];
    for (var i = 0; i <= 20; i += 1)
        d33.push([i, parseInt(Math.random() * 30)]);
     var plot = $.plot($("#bar-chart"),
           [  { data: d11, label: "Google+", color:"#ef4723", shadowSize:0 }, { data: d22, label: "Envato", color:"#a1d14d", shadowSize:0}, { data: d33, label: "Facebook", color:"#4a8cf7", shadowSize:0 } ], {
               series: {
                  stack: 0,
                   lines: { show: false, fill:false },
                   points: { show: false, fill:true },
                   bars: {show:true, barWidth: 0.6}
               },
               grid: { hoverable: true, clickable: true, autoHighlight: false, borderWidth:0,  backgroundColor: { colors: ["#fff", "#fbfbfb"] } },
             });
});
$(function () {
  var data = [];
  var series = Math.floor(Math.random()*5)+1;
  data[0] = { label: "Google+", data:42, color: "#cb4b4b" };
  data[1] = { label: "Envato", data:27, color: "#4da74d"};
  data[2] = { label: "Pinterest", data:9, color: "#edc240"};
  data[3] = { label: "Facebook", data:22, color: "#5e96ea"};
  // Pie Chart
    $.plot($("#donut"), data, 
  {
      series: {
        pie: { 
          label: {
            show: true,
            radius: 1,
            formatter: function(label, series){
                return '<div class="chart-label">'+label+'&nbsp;'+Math.round(series.percent)+'%</div>';
            }
          },
          show: true,
          radius:1,
          highlight: {
            opacity: 0.3
          },
          legend: {
            show: false
          },
        }
      }
    });
    // Donut Chart
    $.plot($("#donut2"), data,
    {
            series: {
            pie: { 
              show: true,
              innerRadius: 0.42,
              highlight: {
                opacity: 0.3
              },
              radius: 1,
              stroke: {
                color: '#fff',
                width: 4
              },
              startAngle: 0,
              combine: {
                          color: '#353535',
                          threshold: 0.05
              },
              label: {
                          show: true,
                          radius: 1,
                          formatter: function(label, series){
                              return '<div class="chart-label">'+label+'&nbsp;'+Math.round(series.percent)+'%</div>';
                          }
                      }
              },
              grow: { active: false}
              },
              legend:{show:true},
              grid: {
                      hoverable: true,
                      clickable: true
              },
    });
});
   // Spider chart
      var p1,p2,data,options;
      $(function () {
          var d1 = [ [0,10], [1,20], [2,80], [3,70], [4,60] ];
              var d2 = [ [0,30], [1,25], [2,50], [3,60], [4,95] ];
              var d3 = [ [0,50], [1,40], [2,60], [3,95], [4,30] ];
              options = { series:
                                  { spider:
                                              { active: true
                           ,highlight: {mode: "area"}
                           ,legs: { data: [{label: "Scalability"}
                                            ,{label: "Stability"}
                                            ,{label: "Accuracy"}
                                            ,{label: "Flexibility"}
                                            ,{label: "Quality"}
                                          ]
                                          , legScaleMax: 1, legScaleMin:0.8}
                           ,spiderSize: 0.9 }
                          }
                         ,grid:
                                          { hoverable: true
                                               ,clickable: true
                                               ,tickColor: "rgba(0,0,0,0.2)"
                                               ,mode: "radar"
                                              }
                        };
              data = [ { label: "Google",          data: d1, spider: {show: true, color: "#cb4b4b"} }
                      ,{ label: "Envato",        data: d2, spider: {show: true, color: "#a1d14d"} }
                      ,{ label: "Facebook",      data: d3, spider: {show: true,  color: "#5e96ea"} }
                     ];
          p1 = $.plot($("#spider"), data , options);
      });
</script> 
<script>
    // Animated gauge charts
      var g1, g2;
      window.onload = function(){
     
        var gauge1 = new JustGage({
          id: "gauge1", 
          value: 126, 
          min: 0,
          max: 180,
          title: "Visitors",
          titleFontColor: "#fff",
          label: "per minute",
        });
         var gauge2 = new JustGage({
          id: "gauge2", 
          value: 28, 
          min: 0,
          max: 180,
          title: "Errors",
           titleFontColor: "#fff",
          label: "average",
        });
          var gauge3 = new JustGage({
          id: "gauge3", 
          value: 79, 
          min: 0,
          max: 180,
          title: "Timers",
           titleFontColor: "#fff",
          label: "average",
        });
           var gauge4 = new JustGage({
          id: "gauge4", 
          value: 163, 
          min: 0,
          max: 180,
          title: "Events",
           titleFontColor: "#fff",
          label: "per month",
        });
        setInterval(function() {
          gauge1.refresh(getRandomInt(60, 80));
          g2.refresh(getRandomInt(120, 160));          
        }, 2500);
      };
    </script> 
<script type="text/javascript">
  /**** Specific JS for this page ****/



</script>
</body>
</html>